<template>
	<view>
		<view class="conpon_detail">
			<view class="cashCoupon">
				<view class="my__coupon">
					<view class="securities">
						<view class="coupon kfbt">
							<view class="logo_img box">
								<image :src="coupon.image_url"></image>
							</view>
							<view class="coupon__r">
								<view class="coupon__content">
									<view class="coupon__price" v-if="coupon.coupon_type == 'CASH'">
										<template v-if="coupon.plantype == 'D'">
											￥
											<text>{{coupon.price}}</text>
											<view class="orprice">原价：{{coupon.amount}}元</view>
										</template>
										<template v-else>
											￥
											<text>{{coupon.amount}}</text>
										</template>
									</view>
									<view class="coupon__discount" v-else-if="coupon.coupon_type == 'DISCOUNT'">
										<text>{{coupon.rebate}}</text>折
									</view>
									<view class="mydesc flex">
										<view class="coupon__tit">{{coupon.act_name || ''}}</view>
										<view class="coupon__sub">{{coupon.explain != null ? coupon.explain : '1'}}</view>
									</view>
								</view>
								<view class="coupon_term" v-if="coupon.time_limit_type == 'custom'">{{coupon.time_show}}</view>
								<view class="coupon_term" v-else>有效期：{{coupon.startdate}} 至 {{coupon.enddate}}</view>
							</view>
							<view class="coupon_abs">
								<button class="kfbt mybtn coupon_btn">
									<view class="txt">去使用</view>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="coupon_bottom">
				<view class="coupon_nav active">
					<view class="con box box-align-start" v-if="coupon.use_type === 'show'">
						<view class="txt">使用:请向店员展示此券码，店员扫码核销</view>
					</view>
					<view class="box box-pack-center" v-else-if="coupon.use_type === 'show_img'">
						<image :src="coupon.show_img_url" mode='widthFix' class="show_img"></image>
					</view>
					<view class="con box box-align-start" v-else>
						<view class="txt">使用：复制券码，跳转至{{coupon.comp_name}}粘贴使用</view>
					</view>
					<view class="code">
						<block v-if="coupon.use_type === 'show' && coupon.coupon_num">
							<view class='code_img'>
								<image bindtap='scaleBarcode' :src="coupon.barcodeurl" mode='widthFix' />
							</view>
							<view class='use_notice' v-if="coupon.is_third == 'N'">
								{{coupon.coupon_num}}
							</view>
						</block>
						<block v-else-if="coupon.use_type === 'showqr' && coupon.coupon_num">
							<view class='qrcode_img'>
								<image bindtap='scaleBarcode' v-if="qrcodeurl" :src="qrcodeurl" mode='widthFix' />
							</view>
							<view class='use_notice' v-if="coupon.is_third == 'N'">
								{{coupon.coupon_num}}
							</view>
						</block>
						<block v-else-if="coupon.use_type === 'copy' && coupon.coupon_num">
							<view class='use_notice' v-if="coupon.is_third == 'N'">
								{{coupon.coupon_num}}
							</view>
							<view class="box box-pack-center">
								<view class="copy_btn" @click.stop="copyTBL">复制券码</view>
							</view>
						</block>
						<block v-if="coupon.password">
							<view class="password box box-pack-center box-align-center">
								<view class="txt">密码</view>
								<view class="pass">{{coupon.password}}</view>
							</view>
							<view class="passcopy" @tap="handlelook">点击扫描条形码</view>
						</block>
						<view class="fun">
							<view class="bot box box-align-center">
								<!-- data-rules="{{coupon.text1}}" -->
								<view class="con" @tap="handleproblem">无法用券？</view>
								<view class="flex"></view>
								<view class="box box-align-center box-pack-center">
									<view class="sign box box-align-center box-pack-center" @click.stop="handleSign" v-if="coupon.is_sign==='N'">
										<image src="/static/images/icon_xing.png"></image>
										<view class="sign_txt">标记使用</view>
									</view>
									<view class="sign box box-align-center box-pack-center" @click.stop="handleCancelsign" v-else-if="coupon.is_sign==='Y'">
										<image src="/static/images/icon_xing.png"></image>
										<view class="sign_txt">取消标记</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="act_list">
				<navigator url="" class="item box box-align-center">
					<view class="hd">附近门店</view>
					<view class="navigator-arrow"></view>
				</navigator>
				<view class="item box box-align-center" @tap="handleBrandToggle">
					<view class="hd">使用规则</view>
					<view :class="['fd', brand_toggle ? 'active':'']"></view>
				</view>
				<view class='remark' v-if="brand_toggle">
					<rich-text :nodes="coupon.plan_rule"></rich-text>
				</view>
			</view>
		</view>
		<alert
			:title="pwdTitle"
			ref="pwdAlert"
		>
			<view class="popupimg">
				<image :src="coupon.pwdcodeurl" mode='widthFix'></image>
			</view>
			<view class="popuptxt">{{coupon.password}}</view>
		</alert>
	</view>
</template>

<script>
	import Alert from '../iframe/alert.vue'
	export default {
		props: [
			"coupon"
		],
		data(){
			return {
				pwdTitle: '密码',
				brand_toggle: true
			}
		},
		components: {
			Alert
		},
		methods:{
			handlelook(){
				this.$refs.pwdAlert.showAlert()
			},
			handleBrandToggle(){
				this.brand_toggle = !this.brand_toggle
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/styles/couponlist.css";
	@import "../../assets/styles/coupon-bottom.scss";
	.cashCoupon .my__coupon .coupon {
		margin-top: 0;
	}
	.popupimg {
	  text-align: center;
		image {
		  width: 80%;
		}
	}
	.popuptxt {
	  color: #393939;
	  font-size: 32rpx;
	  text-align: center;
	  margin: 50rpx 0;
	}
	
	.act_list {
	  padding: 0rpx 20rpx;
	  background: #fff;
	  padding-top: 17rpx;
		.item {
		  height: 42rpx;
		  padding: 17rpx 0;
			.hd {
			  flex: 1;
			  font-size: 30rpx;
			  color: #565656;
			}
			.fd {
			  font-size: 32rpx;
			  color: #565656;
				padding-right: 18rpx;
				position: relative;
				padding-top: 36rpx;
				&:after {
					content: " ";
					display: inline-block;
					height: 18rpx;
					width: 18rpx;
					border-width: 3rpx 3rpx 0 0;
					border-color: #979797;
					border-style: solid;
					transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
					position: absolute;
					top: 50%;
					margin-top: -12rpx;
					right: 10rpx;
					transition: all 0.5s;
				}
				&.active:after {
					transition: all 0.5s;
					transform: rotate(135deg);
				}
			}
		}
	}
</style>
